<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>图书管理系统</title>

    <style>
        .main {
            width:1000px;
            height:auto;
            margin:auto;
            padding:20px;
            box-shadow:0 0 20px 0 rgb(0,0,0,0.2);
            border-radius:10px;
        }

        .title {
            text-align: center;
            color: red;
        }

         .op {
            display:flex;
            justify-content: space-between;    /* 设置为两端对齐 */
            align-items: center;    /* 水平对齐 */
        }

        .add a {
            text-decoration:none;
            background-color:rgb(235,106,106);
            color:#fff;
            padding: 7px 14px;
            border-radius: 5px
        }

        .search input:nth-child(1){
            width:180px;
            border:1px solid #ccc;
            padding:8px;
            border-radius:5px;
            margin-right:10px;
        }

        .search input[type="button"]{
            background-color:rgb(236,106,106);
            padding:8px 16px;
            border:none;
            color:#fff;
            border-radius:5px;
        }

        .content{
            margin-top:10px;
        }

        table{
            width:100%;
            margin-top:20px
            border-collpase:collapse;
        }

        th,td{
            border:1px solid #dddd;
            text-align: center;
            padding:12px 15px;
        }

        th{
            background-color:rgb(235,106,106);
            color:#fff;
        }

        tr:nth-child(even){
            background-color:#f3f3f3;
        }
    </style>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        //在页面加载完成后，使用jQuery的$.get()方法从本地服务器的bookinfo接口获取数据，并将这些数据显示在浏览器的控制台上
        //$(function() { ... })是一个文档就绪处理程序，即当DOM（文档对象模型）完成加载后立即执行括号中的函数。
        $(function() {
            //$.get()是jQuery提供的一个异步HTTP请求方法，用于从服务器获取数据
            //function(data)是一个回调函数，当请求成功并且从服务器接收到数据后，这个函数会被调用。data参数包含了从服务器返回的数据
            $.get("http://127.0.0.1:5000/bookinfo", function(data) {
                console.log(data)
                setData(data)
            })
        })


        function search(){
            // 获取类名为 .key 的DOM元素的值
            var key=$('.key').val()
            console.log(key)
            $.get('http://127.0.0.1:5000/search',{
                'key':key
            },function(data){
                //setData(data)
                // 检查数据是否不为空
                if (data && data.length > 0) {
                    // 数据不为空，调用 setData 函数处理数据
                    setData(data);
                } else {
                    // 数据为空或无效，可以提示用户或执行其他操作
                    console.log('No data found.');
                    // 例如，你可以显示一个提示消息给用户
                    alert('No results found for the search term: ' + key);
                }
            })
        }


        function setData(data){
            //使用jQuery选择器$('.bookTableBody')来选取页面中所有带有类名为bookTableBody的元素
            var tableBody = $('.bookTableBody')

            //$.each()是一个jQuery函数，用于遍历数组或对象。这里它用于遍历data数组中的每一个对象。
            //index是当前对象在数组中的索引。
            //obj是当前遍历到的对象。
            var html_str=''
            $.each(data,function(index,obj){
                html_str += '<tr>'
                html_str += '    <td>' + obj.bid + '</td>'
                html_str += '    <td>' + obj.name + '</td>'
                html_str += '    <td>' + obj.price + '</td>'
                html_str += '    <td>' + obj.summary + '</td>'
                html_str += '    <td>' + obj.quantity + '</td>'
                html_str += '    <td><a class="update" href="http://127.0.0.1:5000/change/' + obj.bid + '">修改</a> | <a class="delete" href="http://127.0.0.1:5000/delete/' + obj.bid + '">删除</a></td>'
                html_str += '</tr>'
                // 将拼接好的数据插入到表格中
                tableBody.html(html_str)
                //console.log(html_str)
            })
        }



    </script>

</head>
<body>
<div class="main">
    <div class="title">
        <h1>图书管理系统</h1>
    </div>
    <div class="op">

        <div class="add">
             <a href="/add">添加图书</a>
        </div>

        <div class="search">
            <input type="text" placeholder="请输入图书信息" class="key">
            <input type="button" value="搜索" onclick="search()">
        </div>

    </div>

    <!-- 数据显示区 -->
    <div class="content">
        <table>
        <!--    表头        -->
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>价格</th>
                    <th>简介</th>
                    <th>库存</th>
                    <th>操作</th>
                </tr>
            </thead>

        <!--     数据       -->
            <tbody class="bookTableBody">
                <tr>
                    <td>1</td>
                    <td>python</td>
                    <td>20</td>
                    <td>python数据</td>
                    <td>10</td>
                    <td>修改|删除</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>java</td>
                    <td>30</td>
                    <td>java书籍</td>
                    <td>10</td>
                    <td>修改|删除</td>
                </tr>
            </tbody>
        </table>


    </div>

</div>

</body>
</html>
<script type="text/javascript"></script>